<template>
  <div class="app-container">
    <el-input style="width: 30%" placeholder="请输入查询的内容" v-model="search"></el-input>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>

    <el-button type="primary" icon="el-icon-edit" @click="addDataInfo()">新增</el-button>

    <el-table border width="100%" :data="tableData" style="margin-top: 10px">
      <el-table-column align="center" label="序号" width="80">
        <template slot-scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>

      <el-table-column align="center" label="姓名" width="160">
        <template slot-scope="scope">
          {{scope.row.username}}
        </template>
      </el-table-column>


      <el-table-column align="center" label="年龄" width="100">
        <template slot-scope="scope">
          {{scope.row.age}}
        </template>
      </el-table-column>

      <el-table-column align="center" label="地址">
        <template slot-scope="scope">
          {{scope.row.address}}
        </template>
      </el-table-column>

      <el-table-column align="center" label="邮箱">
        <template slot-scope="scope">
          {{scope.row.email}}
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" fixed="right" width="300">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="dialogVisible(scope.row)">查看</el-button>
          <el-button type="info" size="small" @click="editUser(scope.row)">编辑</el-button>
          <el-button type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!--分页信息-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="20" style="margin-top: 20px">
    </el-pagination>

    <!--对话框-->
    <el-dialog
      :title="title"
      :visible.sync="flag"
      width="50%"
      :before-close="handleClose">
      <el-form label-width="170px" :model="formData">

        <el-form-item label="ID" style="display: none">
          <el-input style="width: 80%" v-model="formData.id">
          </el-input>
        </el-form-item>

        <el-form-item label="姓名">
          <el-input style="width: 80%" v-model="formData.username">
          </el-input>
        </el-form-item>

        <el-form-item label="创建时间">
          <el-col :span="19">
            <el-date-picker type="date" placeholder="选择日期" v-model="formData.date"
                            style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="年龄">
          <el-input style="width: 80%" v-model="formData.age"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input style="width: 80%" v-model="formData.address"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input style="width: 80%" v-model="formData.email"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="flag = false">取 消</el-button>
    <el-button type="primary" @click="saveData()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>

  export default {
    name: 'index',
    methods: {
      dialogVisible: function (row) {
        var vm = this;
        vm.flag = true;
        vm.title = '编辑'
        vm.formData = row;
      },
      addDataInfo() {
        this.flag = true;
        this.title = '新增';
        this.formData.id = ''
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {
          })
      },

      //编辑保存数据
      saveData: function () {
        alert(JSON.stringify(this.formData));
        if (this.formData.id == null || this.formData.id == '') {
          //新增操作
          this.axios({
            method: 'POST',
            url: 'http://localhost:8080/sys/add',
            data: this.formData
          }).then((res) => {
            if (res.status == '200') {
              this.$message.success('保存成功');
              this.flag = false;
              this.fetchData();
            } else {
              this.$message.error('保存失败');
              this.flag = false;
            }
          });
        }
      },
      editUser() {
        this.$router.push('/editUser/index')
      },
      //发送请求获取数据
      fetchData() {
        var vm = this
        this.axios({
          method: 'GET',
          //自己的后台接口
          // url: 'http://localhost:8080/sys/user'
          //mock假数据的后台接口
          url: "https://easy-mock.com/mock/5fb9dec03f90e10d96646670/users"

        }).then(function (res) {
          console.log("********" + JSON.stringify(res));
          vm.tableData = res.data.userList
        })
      },
      handleSizeChange(val){
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val){
        console.log(`当前页: ${val}`);
      }
    },
    //钩子函数
    created() {
      this.fetchData()
    },
    data() {
      return {
        flag: false,
        title: '',
        search: '',
        tableData: null,
        currentPage4: 4,
        formData: {
          id: '',
          username: '',
          age: '',
          address: '',
          email: '',
          date: ''
        }
      }
    }
  }
</script>

<style scoped>

</style>
